<template>
	<view class="dialogue">
		<view class="message-item">
			<u--image shape="circle" :src="spaceInfo.avatar" :height="24" :width="24" class="robot"></u--image>
			<view class="content" :class="{robot:true}">
				<view style="font-weight: bold;margin-bottom: 5px;">这里是 {{spaceInfo.name}} 智能助手</view>
				<view style="margin-bottom: 5px;color: #007aff;" @click="startMessage(item)" v-for="item in list"
					:key="item">{{item}}
				</view>
			</view>
		</view>
		<view v-for="item in messages" :key="item.id">
			<view class="message-item" style="justify-content: flex-end;" v-if="item.role == 'user'">
				<view class="content" :class="{custom:true}">
					{{item.text}}
				</view>
			</view>
			<view class="message-item" v-else>
				<u--image shape="circle" :src="spaceInfo.avatar" :height="24" :width="24" class="robot"></u--image>
				<view class="content" :class="{robot:true}">
					<jo-markdown :nodes="getData(item.text)"></jo-markdown>
				</view>
			</view>
		</view>
		<view class="message-item" v-if="chatStatus">
			<u--image shape="circle" :src="spaceInfo.avatar" :height="24" :width="24" class="robot"></u--image>
			<view class="content" :class="{robot:true}">
				一顿操作中，请稍后...
			</view>
		</view>
	</view>
</template>

<script>
	import markdownFunc from '@/uni_modules/jo-markdown/components/jo-markdown/index.js';
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		computed: {
			...mapState(['messages', 'chatStatus'])
		},
		data() {
			return {
				spaceInfo: uni.getStorageSync('shop_u_info'),
				list: ['拿铁咖啡的制作方法是什么？', '世界最贵的咖啡是什么咖啡？']
			}
		},
		methods: {
			...mapActions(['startMessage']),
			getData(text) {
				return markdownFunc(text, 'markdown')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dialogue {
		padding: 34px 24px;

		.message-item {
			display: flex;
			margin-bottom: 24px;


			.robot {
				margin-left: 4px;
				background: #EAEAEA;
				border-radius: 4px 12px 12px 12px;
				color: #1D2129;
			}

			.custom {
				background: #2E8AF6;
				color: #fff;
				border-radius: 12px 12px 4px 12px;
			}
		}

		.content {
			font-family: HK Grotesk-Regular, HK Grotesk;
			font-weight: 400;
			line-height: 22px;
			font-size: 14px;
			max-width: calc(80vw - 48px);
			// padding: 4px 8px;
			padding: 20rpx;
		}
	}
</style>